<template>
  <div class="right-bottom-div">
    <QrcodePop
      v-if="showQRCode"
      :code-img="codeImg"
      @hideQrcodePop="showQRCode = false"
    />
    <div class="right-bottom-box">
      <div
        v-if="codeImg !== ''"
        class="right-bottom-kefu-box"
      >
        <img
          src="~assets/home/kefu.png"
          class="right-bottom-kefu"
          @click="onClickKeFuBtn"
        >
      </div>
      <div class="right-bottom-phone-box">
        <a
          :href="$store.state.instInfo.ContactPhone ? 'tel://' + $store.state.instInfo.ContactPhone : 'javascript:void(0)'"
        >
          <img
            src="~assets/home/phone.png"
            class="right-bottom-phone"
          >
        </a>
      </div>
      <router-link
        v-if="$store.state.instInfo.Lat && $store.state.instInfo.Lng"
        :to="{name: 'map'}"
        tag="div"
        class="right-bottom-map-box"
      >
        <img
          src="~assets/home/map.png"
          class="right-bottom-map"
        >
      </router-link>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {
    QrcodePop: () => import(/* webpackChunkName: "home" */ './QrcodePop.vue'),
  },
  data () {
    return {
      showQRCode: false,
      codeImg: '',
    }
  },
  created () {
    this.onGetQRCode()
  },
  methods: {
    // 获取公众号二维码
    onGetQRCode () {
      let officialList = this.$store.state.instInfo.OfficialList
      for (let i = 0; i < officialList.length; i++) {
        if (officialList[i].Type === 1 && officialList[i].Img) {
          this.codeImg = officialList[i].Img
        }
      }
    },
    // 点击客服按钮
    onClickKeFuBtn () {
      if (this.$store.state.instInfo.TrainingInstitutionId === 268) {
        const url = 'http://p.qiao.baidu.com/cps/chat?siteId=13327787&userId=27763929'
        window.open(url)
      } else {
        this.showQRCode = true
      }
    },
    // 调用拨号功能
    onCallPhone () {
      if (this.$store.state.instInfo.ContactPhone) {
        window.location.href = 'tel://' + this.$store.state.instInfo.ContactPhone
      }
    },
  },
})
</script>
<style lang="scss" scoped>
// .er-wei-ma-box {
//   position: fixed;
//   top: 0;
//   left: 0;
//   width: 100%;
//   height: 100%;
//   z-index: 11111;
//   text-align: center;
//   background-color: rgba(0,0,0,0.6);
// }
// .er-wei-ma-content {
//   position: absolute;
//   top: calc(50% - 380px);
//   left: calc(50% - 295px);
// }
// .er-wei-ma-bg {
//   width: 590px;
//   height: 660px;
//   margin: auto;
//   // margin-top: 240px;
//   text-align: center;
//   border-radius: 3px;
//   background-color: #F6F6F6;
// }
// .top-prompt {
//   color: #333;
//   font-size: 36px;
//   padding-top: 40px;
// }
// .code-img {
//   width: 450px;
//   height: 450px;
//   margin: 30px 70px;
//   box-shadow:0px 0px 27px 0px rgba(0, 0, 0, 0.2)
// }
// .bottom-prompt {
//   color: #666;
//   font-size: 28px;
// }
// .close-btn {
//   width: 61px;
//   height: 61px;
//   color: #fff;
//   margin-top: 40px;
// }
.right-bottom-box {
  position: fixed;
  bottom: 150px;
  right: 15px;
}
.right-bottom-kefu-box,.right-bottom-phone-box,.right-bottom-map-box {
  width: 89px;
  height: 89px;
}
.right-bottom-kefu-box,.right-bottom-phone-box {
  margin-bottom: 13px;
}
.right-bottom-kefu,.right-bottom-phone,.right-bottom-map {
  width: 100%;
  height: 100%;
}
</style>
